<template>
  <div>
    <FilterConditions
      ref="filt"
      :filter="filter"
      :paramTree="paramTree"
      :selectedRows="selectedRowKeys"
      :selectedRowKeys="selectedRowKeys"
      @showModal="showModal"
      :black="true"
      @refreshList="refreshList"
      @onSearch="onSearch"
    ></FilterConditions>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :rowSelection="rowSelection" :pagination="paginationProps" :scroll="{ x: 1700 }">
      <span slot="nickName" slot-scope="text, record">
        <router-link :to="`/box/customer/info/personal/${record.unionId}`">
          <ellipsis :length="18" tooltip style="color: #40a9ff">{{ text }}</ellipsis>
        </router-link>
      </span>
      <span slot="gender" slot-scope="record">
        <span v-if="record === 1">男</span>
        <span v-if="record === 0">女</span>
      </span>
      <span slot="fashionerType" slot-scope="record">
        <span v-if="record == 1">导购</span>
        <span v-if="record === '0' || record === 0">搭配师</span>
      </span>
      <span slot="subStatus" slot-scope="record">
        <span v-if="record === 2">已过期</span>
        <span v-if="record === 1">订阅中</span>
        <span v-if="record === 0">未订阅</span>
      </span>
      <span slot="userRightStatus" slot-scope="record">
        <span v-if="record === 1">订阅中</span>
        <span v-else-if="record === 0 || record === 2 || record === 3 || record === 4">订阅结束</span>
        <span v-else>未订阅</span>
      </span>
      <!-- <span slot="startTime" slot-scope="record">
       <template v-if="record">{{ record | utc2beijing | moment }}</template>
      </span>
      <span slot="endTime" slot-scope="record">
        <template v-if="record">{{ record | utc2beijing | moment }}</template>
      </span>
      <span slot="createTime" slot-scope="record">
        <template v-if="record">{{ record | utc2beijing | moment }}</template>
      </span> -->
      <span slot="remark" slot-scope="record">
        <a-popover :overlayStyle="{ width: '205px', height: 'auto' }">
          <template slot="content">
            <p>{{ record }}</p>
          </template>
          <span class="remark">{{ record }}</span>
        </a-popover>
      </span>
      <span slot="subType" slot-scope="text"> {{ subTypeFilter(text) }}</span>
      <span slot="action" slot-scope="record">
        <a @click="handleDetail(record)">详情</a>
        <!--        <a-divider type="vertical" />-->
        <!--        <a>下盒</a>-->
      </span>
    </s-table>
    <ListModal
      :filter="fashionerObj"
      :speReasonList="speReasonList"
      :blackReasonList="blackReasonList"
      :modalVisible="modalVisible"
      :selectedRows="selectedRowKeys"
      :modalType="modalType"
      @closeModal="closeModal"
      @refreshList="refreshList"
    ></ListModal>
  </div>
</template>
<script>
import { blackColumns } from './tableBase'
import { customerList } from '@/api/box/member.js'
import { cusListMixin } from './listMixin'

export default {
  mixins: [cusListMixin],
  data() {
    this.columns = blackColumns
    return {
      // 查询条件参数
      queryParam: {
        fashionerType: this.filter.fashionerType ? this.filter.fashionerType.filter(e => e.default)[0].code : null,
        sortType: 1,
        isHaveUnUsedBirthCoupon: 0
      },
      // 加载数据方法 必须为 Promise 对象
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        if (this.queryParam.fashionerType === null) return
        const data = {
          page: parameter,
          requestData: {
            ...this.queryParam,
            cateGory: 57
          }
        }
        return customerList(data).then(res => {
          if (res.code === 0) {
            const data = res
            return data
          } else {
            this.$message.error(res.data.msg)
            const data = {
              page: {
                pageNo: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  watch: {
    $route(to, from) {
      if (from.path.includes('/box/customer/info') && to.path.includes('/box/customer/customerList/index')) {
        console.log('**************1***********')
        this.$refs.table.refresh() // 来自会员详情刷新当前列表
      } else {
        let currentPath = this.$route.path
        if (currentPath.includes('/box/customer/customerList/index')) {
          console.log('**************2***********')
          this.$refs.filt.reset()
          this.selectedRowKeys = []
        }
      }
    }
  },
  mounted() {
    this.$on('bridge', val => {
      this.checkRefresh()
    })
  },
  methods: {
    checkRefresh() {
      if (this.customerStatusList.includes('Black')) {
        this.$refs.table.refresh(true)
        this.$store.commit('REMOVE_CUSTOMER_STATUS_LIST', 'Black')
      }
    }
  }
}
</script>
<style scoped>
.remark {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
